// 1. createApp生成一个app实例对象
// 2. app.directive('指令名称', {指令的配置项})
import { useIntersectionObserver } from '@vueuse/core'
// 引入默认图片
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    // app.direative
    console.log('全局指令定义', app)
    app.directive('imgLazy', {
      // 指令挂载到节点上时立刻执行 并且只会执行一次
      // el：绑定了指令的原生dom对象 img
      // binding.value:  v-imgLazy="这里表达式的值"
      mounted (el, binding) {
        console.log('指令参数', el, binding.value)
        // 懒加载逻辑实现: 当前的el对象进入到视口之后 我们才加载对应的url
        // 使用useIntersectionObserver监听img
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting
            // 可以使用isIntersecting变量的是否为true来控制ajax请求是否要发起
            console.log(isIntersecting)
            if (isIntersecting) {
              // 当图片加载失败的时候使用默认图片赋值
              el.addEventListener('error', () => {
                el.src = defaultImg
              })
              // 在这里把url交给src属性
              el.src = binding.value
              stop()
            }
          },
          {
            // 用来控制目标target进入视口区域的比例
            // 0 - 1  数值越大要求进入到视口区域的面积越大 才会触发回调
            //        数值越小要求进入到视口区域的面积越小 才会触发回调
            threshold: 0.1
          }
        )
      }
    })
  }
}
